<template>
  <div class="route-page">
    <a-card class="card-with-title-page" title="合同到期提醒规则" size="small">
      <template #extra>
        <a-button
          v-permission="['contractExpireRule', 'curd', 'add']"
          type="primary"
          @click="editRule()"
        >
          <template #icon>
            <PlusOutlined />
          </template>
          提醒规则
        </a-button>
      </template>
      <!-- 表格 -->
      <a-table
        sticky
        :columns="columns"
        :data-source="ruleList"
        row-key="id"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
        :scroll="{ x: 'max-content' }"
      >
        <template #bodyCell="{ text, record, index, column }">
          <template v-if="column.key === 'build'">
            <a-tag
              style="margin-bottom: 5px"
              v-for="(tag, index) in record.buildNames"
              :key="index"
              >{{ tag }}</a-tag
            >
          </template>
          <template v-if="column.key === 'action'">
            <a-button
              type="link"
              v-permission="['contractExpireRule', 'curd', 'edit']"
              @click="editRule(text)"
            >
              编辑
            </a-button>
            <a-button
              type="link"
              v-permission="['contractExpireRule', 'curd', 'delete']"
              danger
              @click="deleteRule(record)"
            >
              删除
            </a-button>
          </template>
        </template>
      </a-table>
    </a-card>
    <rule-edit
      :visible="ruleEditVisible"
      :id="ruleId"
      @cancel="handleRuleEditCancel"
      @success="handleRuleEditSuccess"
    />
  </div>
</template>

<script>
import { defineComponent, ref, watch, computed } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import RuleEdit from "./modules/RuleEdit.vue";
import request from "../../../common/utils/request";
import utils from "../../../common/utils/utils";
import { message } from "ant-design-vue";

export default defineComponent({
  name: "contractExpireRule",
  components: { PlusOutlined, RuleEdit },
  setup() {
    /**
     * @description: 分页信息
     */
    const page = ref(1);
    const pageSize = ref(10);
    const total = ref(0);
    const pagination = computed(() => ({
      total: total.value,
      current: page.value,
      pageSize: pageSize.value,
      showSizeChanger: true,
    }));
    const handleTableChange = (pager, filters, sorter) => {
      page.value = pager.current;
      pageSize.value = pager.pageSize;
    };

    /**
     * @description: 表格数据
     */
    const loading = ref(false);
    const ruleList = ref([]);
    watch([page, pageSize], () => {
      getTableData();
    });
    const getTableData = () => {
      loading.value = true;
      request
        .get("/org", "/contract/expireRuleList", {
          page: page.value,
          limit: pageSize.value,
        })
        .then((res) => {
          ruleList.value = res.list;
          total.value = Number(res.total);
        })
        .finally(() => {
          loading.value = false;
        });
    };
    // 关联楼宇的显示
    const buildNames = (build) => {
      return build.join("、");
    };

    /**
     * @description: 增删改操作
     */
    // 编辑、添加
    const ruleEditVisible = ref(false);
    const ruleId = ref(0);
    const editRule = (id) => {
      ruleEditVisible.value = true;
      ruleId.value = id || 0;
    };
    const handleRuleEditCancel = () => {
      ruleEditVisible.value = false;
      ruleId.value = 0;
    };
    const handleRuleEditSuccess = () => {
      handleRuleEditCancel();
      page.value = 1;
      getTableData();
    };

    // 删除
    const deleteRule = (record) => {
      utils.modalConfirm({
        content: `确认删除合同提醒规则“${record.rule_name}”吗？`,
        onOk: () => {
          request
            .del("/org", "/contract/delExpireRule", {
              id: record.id,
              needMsg: true,
            })
            .then((res) => {
              message.success(res.msg || "删除成功！");
              getTableData();
            });
        },
      });
    };

    // 初始化
    const init = () => {
      getTableData();
    };

    init();

    return {
      ruleList,
      columns,
      loading,
      pagination,
      ruleEditVisible,
      ruleId,
      handleRuleEditCancel,
      handleRuleEditSuccess,
      buildNames,
      editRule,
      deleteRule,
      handleTableChange,
    };
  },
});

const columns = [
  {
    title: "名称",
    dataIndex: "rule_name",
    key: "rule_name",
  },
  {
    title: "关联楼宇",
    dataIndex: "villageNames",
    key: "build",
    width: 700,
    // ellipsis: true,
  },
  {
    title: "操作",
    dataIndex: "id",
    key: "action",
  },
];
</script>

<style lang="less" scoped></style>
